<template>
  <p-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <p-row>
      <p-col :span="24">
        <p-divider orientation="left" style="margin-top: -5px;">流程处理</p-divider>
        <p-form-model-item ref="radio" prop="radio" label="操作">
          <p-radio-group v-model="form.radio">
            <p-radio :value="3">同意</p-radio>
            <p-radio :value="6">驳回</p-radio>
            <p-radio @click.native="toClick" @change="resetForm()" :value="9">转办</p-radio>
          </p-radio-group>
        </p-form-model-item>
      </p-col>
    </p-row>
    <p-row>
      <p-col :span="24">
        <p-form-model-item ref="comment" prop="comment" label="处理意见">
          <p-input
            :label-col="{span:3, offset: -20}"
            :wrapper-col="{span:21, offset: 0}"
            v-model="form.comment"
            type="textarea"
            placeholder="请输入内容"
            resize="none"
            required="请输入内容"
          />
        </p-form-model-item>
      </p-col>
    </p-row>
    <lookOne :modal="true" :title="'转派'" ref="lookOne"></lookOne>
    <div style="margin: 10px 0 0;text-align: center;">
      <p-button @click="submit" :loading="loadingSum" type="primary" style="margin-right:10px">提交</p-button>
      <p-button @click="close" :loading="loadingSum">取消</p-button>
    </div>
  </p-form-model>
</template>

<script>
const columns = [
  {
    title: '创建时间',
    key: 'name',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '处理时间',
    key: 'area',
    ellipsis: true,
    scopedSlots: { customRender: 'area' },
  },
]
import { getAction } from '@/api/manage'
import Bus from '@/utils/bus'
import lookOne from './lookOne.vue'
import process from '@/api/process'
export default {
  inject: ['routeClose', 'reload'],
  props: {
    taskId: String,
    step: String,
    processInstanceId: String,
  },
  components: {
    lookOne,
  },
  data() {
    return {
      columns,
      cLoading: false,
      form: {
        comment: '',
        radio: 3,
      },    
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 22 },
      },
      validat: false,
      tableData: [
        {
          key: '1',
          name: '操作',
          area: 1,
        },
        {
          name: '处理意见',
          key: '2',
          area: 2,
        },
      ],
      rules: {
        comment: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === '' && this.form.radio == 6) {
                callback(new Error('请输入处理意见'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      url: {
        rejectTask: '/mes-quality/mesQcQualityImproveTask_1/back',
      },
    }
  },
  methods: {
    toClick() {
      this.$refs.lookOne.startVisible = true
    },
    close() {
      this.routeClose(this.$route)
      this.reload()
    },
    submitData(variable) {
      const params = {
        // 处理意见
        comment: this.form.comment,
        // 当前任务ID
        taskId: this.taskId,
        assigneeId: '',
        variables: variable,
      }
      let _that = this
      if (this.form.radio == 3) {
        process
          .completeTask(params)
          .then((res) => {
            if (res.code === 0) {
              this.$message.success('同意操作提交成功')
            } else {
              // this.$message.error(res.msg);
              console.log(res.msg)
            }
            this.cLoading = false
          })
          .catch((r) => {
            this.cLoading = false
          })
      } else if (this.form.radio == 6) {
        getAction(this.url.rejectTask + '/' + _that.processInstanceId).then((res) => {
         if (res.code == '0') {
            return process.rejectTask(params)
        }}).then((res) => {
            console.log(res)
            if (res.code === 0) {
              this.$message.success('驳回操作提交成功')
            } else {
               console.log(res.msg)
            }
            this.cLoading = false
          })
          .catch((r) => {
            this.cLoading = false
          })

      } else if (this.form.radio == 9) {
        params.assigneeId = this.$refs.lookOne.assigneeId
        process
          .transferTask(params)
          .then((res) => {
            if (res.code === 0) {
              this.$message.success('转办操作提交成功')
            } else {
               console.log(res.msg)
            }
            this.cLoading = false
          })
          .catch((r) => {
            this.cLoading = false
          })
      }
       setTimeout(() =>{
                   this.close() 
       },1000);       
    },
    submit() {
      this.cLoading = true
      // 通知表单2保存数据
      if (this.step) {
        console.log('验证表单')  
        if (this.form.radio == 3) {     
        Bus.$emit('Formvalidat')
        }
        // console.log(this.validat)
        if (this.form.radio == 6) {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.validat = true
            } else {
              this.validat = false
            }
          })
        }
        if (this.validat && this.form.radio == 6) {
           this.submitData();
           //  setTimeout(() =>{
           //          this.close() 
           //  },2000); 
        }
        else if (this.validat && this.form.radio == 3)
        {
          Bus.$emit('prevSubmit', this.form.radio)
        } else {
          this.cLoading = false
        }
      }
      // if ( this.step && (this.step === 'table4'||this.step === 'table5'||this.step === 'table6') ){
      //   this.submitData();
      //   this.close()
      //   console.log("关闭表单")
      // }
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
  },
  mounted() {
    Bus.$on('nextSubmit', (val) => {
      console.log('可以真正提交了')
      this.submitData(val)
    }),
      Bus.$on('nextValidat', (val) => {
        console.log('可以真正提交了')
        if (val) {
          this.validat = true
        } else {
          this.validat = false
        }
      })
  },
}
</script>

<style scoped lang="less">
.oper {
  overflow: hidden;
}
.left {
  float: left;
  width: 94px;
  padding-left: 24px;
  font-size: 14px;
  border: 1px solid rgba(226, 226, 226, 1);
}

.right {
  width: 890px;
  display: inline-block;
  font-size: 14px;
  border: 1px solid rgba(226, 226, 226, 1);
}

.right .el-radio-group {
  margin-left: 10px;
}

.inputArea {
  float: left;
}

.el-textarea__inner {
  height: 64px;
}

.button {
  // width: 62px;
  margin-left: 4px;
  height: 54px;
  background-color: #168fff;
  text-align: center;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  // border-radius: 2px;
}
.stepName {
  margin: 36px 0px 24px 0;
  font-size: 16px;
}
.submitBtn {
  cursor: pointer;
  color: #fff;
}
.title-line {
  font-size: 16px;
  margin: 30px 0 10px 0;
}
.area {
  height: 40px;
  display: flex;
  align-items: center;
}
</style>
